{extend name="public/base" /}
{block name="css"}
<style>

  .container-fluid {

  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .left-container {
    display: none;
    width: 160px;
    height: 448px;
    background: #FF913C;
    border-radius: 8px;
    position: fixed;
    left: 120px;
    top: 180px;
    z-index: 100;
  }

  .left-nav {
    background: #ffffff;
    border-radius: 8px;
    text-align: center;
    margin: 0 5px;
    padding: 10px 10px 20px;
  }

  .left-nav > div {
    margin-top: 10px;
    cursor: pointer;
    color: #333333;
    font-size: 14px;
    padding: 3px;
  }

  .left-nav .selected {
    background: #FA5C24;
    color: #ffffff;
    border-radius: 13px;
  }

  .appointment {
    background: #C2251D;
    border-radius: 8px;
    width: 120px;
    height: 35px;
    line-height: 32px;
    color: #ffffff;
    border: 0;
    margin-top: 10px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/banner/banner-rz.jpg">

  <div class="mx-auto" style="background: #ECBFA8">
    <img alt="" style="margin-top: 60px;width: 508px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/title_sp.png" >
    <video width="1000px" id="video" poster="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/mobile/shiping.png" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/5thanniversary.mp4" style="height: 70%;margin: 50px 0;display:block;"></video>
  </div>

  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/dk.jpg">

  <div class="left-container">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/tab_top.png">
    <div class="left-nav">
      <div id="nav-zmyj">10重软装大礼</div>
      <div id="nav-ujgc">8重整装大礼</div>
      <div id="nav-dgzj">10重旧房焕新大礼</div>
    </div>
    <div style="color: #FFFFFF; font-size: 14px;text-align: center;margin-top: 10px">
      扫码咨询更多
      <br>
      周年庆福利详情
    </div>
    <img alt="" style="margin-top: 10px" class="mx-auto img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/code_zx.png">
    <button  onclick="window.page_postion = '5周年庆左侧悬浮报名按钮';showAppointmentLayer()" class="mx-auto appointment">抢占活动名额</button>
  </div>

  <div id="zmyj" class="mx-auto" style="position: relative">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/ZMYJ/rz1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/ZMYJ/rz2.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/ZMYJ/rz3.jpg">
    <img onclick="window.page_postion = '10重软装报名按钮';showAppointmentLayer()" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 30px" alt="" class="img-fluid u-order" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/ZMYJ/button_rz.png">
  </div>

  <div id="ujgc" class="mx-auto" style="position: relative">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/UJGC/zz1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/UJGC/zz2.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/UJGC/zz3.jpg">
    <img onclick="window.page_postion = '8重整装报名按钮';showAppointmentLayer()" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 30px" alt="" class="img-fluid u-order" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/UJGC/button_zz.png">
  </div>

  <div id="dgzj" class="mx-auto" style="position: relative">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/DGZJ/gz1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/DGZJ/gz2.jpg">
<!--    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/DGZJ/gz3.jpg">-->
<!--    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/DGZJ/gz4.jpg">-->
    <img onclick="window.page_postion = '10重旧房焕新报名按钮';showAppointmentLayer()" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 30px" alt="" class="img-fluid u-order" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/DGZJ/button_gz.png">
  </div>
  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/pc/pppc.jpg">
  <div style="margin: 50px 0 60px; text-align: center; color: #333;letter-spacing: 2px">*以上礼品以实物为准，活动详情咨询工作人员<br>以上活动解释权归致美优家所有</div>
</section>
{/block}
{block name="js"}
<script>
  $('#nav-ujgc').on('click', function () {
      $('html,body').animate({scrollTop:$('#ujgc').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });
  $('#nav-zmyj').on('click', function () {
      $('html,body').animate({scrollTop:$('#zmyj').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });
  $('#nav-dgzj').on('click', function () {
      $('html,body').animate({scrollTop:$('#dgzj').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });

  $('.left-container').hide();

  const video = document.querySelector('#video');

  video.onclick = function() {
      if(video.paused){
          video.play();
      }else{
          video.pause();
      }
  };

  $(function(){
      // 监听滚动事件
      $(window).scroll(function(){

          const zmyj = document.getElementById("zmyj").offsetTop+($(window).height() - 100);
          console.log('zmyj', zmyj);
          console.log('11', $(window).scrollTop());
          console.log('22', $(window).scrollTop()+$(window).height());
          if (zmyj >= $(window).scrollTop() && zmyj < ($(window).scrollTop()+$(window).height())) {
              $('.left-container').show();
              $('#nav-zmyj').addClass('selected');
          }else{
              $('#nav-zmyj').removeClass('selected');
              if($(window).scrollTop() < zmyj) {
                  $('.left-container').hide();
              }
          }



          const ujgc = document.getElementById("ujgc").offsetTop+($(window).height() - 100);
          if (ujgc >= $(window).scrollTop() && ujgc < ($(window).scrollTop()+$(window).height())) {
              $('#nav-ujgc').addClass('selected');
          }else{
              $('#nav-ujgc').removeClass('selected');
          }

          const dgzj = document.getElementById("dgzj").offsetTop+($(window).height() - 100);
          if (dgzj >= $(window).scrollTop() && dgzj < ($(window).scrollTop()+$(window).height())) {
              $('#nav-dgzj').addClass('selected');
          }else{
              $('#nav-dgzj').removeClass('selected');
          }
      });
  })
</script>
{/block}